<template>
	<div class="container">
		<div style="width: 18%; height: 97%;">
			<el-scrollbar style="float: left; width: 100%; height: 100%; margin:12px 0px 12px 5px" class="test">
				<tree-List
				class="test2"
				treeTitle="灰名单种类"
				:companyData="grayData"
				:defaultProps="defaultProps"
				@handleNodeClick="handleNodeClick"
				style='width:100%; margin:0;box-sizing:border-box;'
			/>
		</el-scrollbar>
		</div>
		<div style="float: left; width: 82%; height: auto">
			<layout-card
				v-model="search"
				:filters="greyListOptions"
				headline="信息列表"
				headtitle="数据筛选"
				:hasButton="true"
				@search-change="searchChange"
				@search-reset="searchReset"
			>
				<template #action>
					<el-button class="link-btn" type="danger" @click="handleDelete()"
								>删除</el-button
							>
					<!-- <el-popconfirm
						title="是否删除?"
						confirmButtonText="确定"
						cancelButtonText="取消"
						@confirm="() => handleDelete()"
					>
						<template #reference>
							<el-button class="link-btn" type="danger" @click="beforehandleDelete()"
								>删除</el-button
							>
						</template>
					</el-popconfirm> -->
					<el-button type="primary" @click="handleCreate">新增</el-button>
				</template>
				<table-common
					:columns="greyListColumns"
					:loading="loading"
					:pagination="pager"
					:table-data="data?.data?.list"
					size="large"
					:height="500"
					stripe
					@current-change="changeCurrent"
					@size-change="changePageSize"
					@beforeUpload="beforeUpload"
					@sort-change="sortChange"
					@selection-change="selectionChange"
				>
					<!-- 提示：需要格式化显示内容的字段值根据实际情况修改，此处示例使用的是state  -->
					<template #faceInfo="{ row }">
						<span v-if=" row.files && row.files[0].resourceAddress">
							<el-image style="width: 120px; height: 60px" :src="row.files[0].resourceAddress" :fit="fit" />
						</span>
						<span v-else>{{ '————' }}</span>
					</template>
					<template #action="{ row }">
						<!-- 自定义操作栏示例  -->
						<el-button class="link-btn" @click="handleEdit(row)" link type="primary"
							>编辑</el-button
						>
						<el-popconfirm
							title="是否删除?"
							confirmButtonText="确定"
							cancelButtonText="取消"
							@confirm="() => deleteItem(row)"
						>
							<template #reference>
								<el-button class="link-btn" link type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</table-common>
			</layout-card>
		</div>
	</div>
	<!-- 新增 -->
	<edit-dialog
		:centerDialogVisible="addDialogVisible"
		:tilte="addTilte"
		:key="timer"
		:width="700"
		:height="100"
		@Cancel="Cancel"
		@Submit="Submit"
		class="elDialog"
	>
		<template #content>
			<FilterBar
				ref="FilterRef"
				v-model="search"
				:filters="dialogType"
				:hasButton="false"
				:rules="rules"
				@beforeUpload="beforeUpload"
			></FilterBar>
		</template>
	</edit-dialog>
	<!-- 编辑 -->
	<edit-dialog
		:centerDialogVisible="editDialogVisible"
		:tilte="editTilte"
		:key="timer"
		:width="700"
		@Cancel="editCancel"
		@Submit="SubmitEdit"
	>
		<template #content>
			<FilterBar
				ref="FilterRef"
				v-model="search"
				:filters="dialogType"
				:hasButton="false"
				:rules="rules"
				:beforeUpload="beforeUpload"
			></FilterBar>
			<div class="imagebutton" v-if="faceInfoPicturesArr.length > 0 && faceInfoPicturesArr[0].enclosureName !== ''">
				<div style="display: flex; justify-content: center">
					<el-text style="display: flex; flex-direction: row;"><h3>图片名:&nbsp</h3>{{ faceInfoPicturesArr[0].enclosureName }}</el-text>
					<Delete
						style="margin-left: 15px; width: 18px; height: 18px"
						@click="removeFacePic(faceInfoPictures[0])"
					></Delete>
				</div>
				<el-image
					:src="faceInfoPictures[0]"
					style="width: 100%; height: 350px"
					:preview-src-list="faceInfoPictures"
					:initial-index="4"
				></el-image>
				<el-button type="primary" size="small" @click="downloadPic">下载图片</el-button>
			</div>
		</template>
	</edit-dialog>
</template>

<script lang="ts" setup>
	import type { UploadProps } from 'element-plus';
	import { ElMessage } from 'element-plus';
	// 需要导入watch监听
	import { computed, ref, onBeforeMount, nextTick,toRaw } from 'vue';
	// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
	import LayoutCard from '@/components/LayoutCard/index.vue';
	import TableCommon from '@/components/TableCommon/index.vue';
	import { greyListColumns } from '@/views/pax/grey/list/config/columns';
	import { greyListOptions, greyListDialogOptions } from './config/filters';
	import { UtilRoles } from './config/rules';
	import { usePagination } from 'vue-request';
	import {
		greyPageList,
		greyListDel,
		greyListAdd,
		greyListEdit,
		greylistDels,
		greyTypeList,
		greyListsdelType,
		uploadFiles,
		downloadFiles,
		deleteFiles,
		basePath,
	} from '@/api/pax/listgrey';
	import FilterBar from '@/components/FilterBar/index.vue';
	import editDialog from '@/views/components/editDialog/index.vue';
	// 新增tree组件导入
	import TreeList from '@/views/components/TreeList/index.vue';
	import { useStore } from 'vuex';
import { number } from 'echarts';

	// 获取登录用户信息
	const { getters } = useStore();
	// 用户信息
	const UserInfo = computed(() => getters['user/getUserInfo']);

	// 存储登陆用户信息
	const mender = ref({});
	if (UserInfo.value) {
		mender.value.id = UserInfo.value.userId;
		mender.value.name = UserInfo.value.name;
		mender.value.organId = UserInfo.value.organId;
		mender.value.organName = UserInfo.value.organName;
	}
	const FilterRef = ref('');
	const Service = (data: ListParams) => {
		return new Promise((resolve) => {
			// 数据写入
			setTimeout(() => {
				const response = {
					params: data,
					data: {
						list: tableData.value,
						total: totalSize.value,
					},
				};
				resolve(response);
			}, 300);
		});
	};
	// =============接口数据==END

	const {
		run,
		data,
		loading,
		current,
		pageSize,
		total,
		// changeCurrent,
		// changePageSize
	} = usePagination(Service, {
		manual: true,
		pagination: {
			currentKey: 'pageNum',
			pageSizeKey: 'pageSize',
			totalKey: 'data.total',
		},
	});

	/*
	 * 功能-用于获取复选框
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   checks：复选框数组
	 *   companyData：要显示的数据集
	 *   defaultProps：数据集关键结构
	 * }
	 */

	// 获取选中行的id
	const checks = ref();
	
	// 点击复选框时
	const selectionChange = (selection) => {
		// 返回一个number类型数组
		checks.value = selection.map((item) => item.id);
		checks.value.map((str) => Number(str));
	};

	// 选择文件时触发
	// 用于控制人脸信息触发何种验证
	const fileFlag = 0
	greyListDialogOptions.forEach(e=>{
      if (e.prop === 'faceInfo') {
        e.events.onChange = function (value, evt) {
					nextTick(()=>{
						fileFlag = 0
						// 手动触发验证
						FilterRef.value.validateRuleFormRef()
						if (value.raw.type !== 'image/png' && value.raw.type !== 'image/jpeg' && value.raw.type !== 'image/gif') {
							fileFlag = 1
							// 手动触发验证
							FilterRef.value.validateRuleFormRef()
							// 删除非图片文件
							FilterRef.value.getParams().faceInfo.pop()
						}	if (value.size / 1024 / 1024 >= 10) {
							fileFlag = 2
							// 手动触发验证
							FilterRef.value.validateRuleFormRef()
							// 删除大于10m的图片
								FilterRef.value.getParams().faceInfo.pop()
							}
					})
        }
    }
	})

	/*
	 * 功能-用于打开新增窗口
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   typeId：存储灰名单id的数组
	 *   timer：// 时间戳，用于确保弹窗页面能加载不同的界面
	 *   dialogType：// 弹窗页面类型
	 *   addTilte：// 弹窗标题
	 * }
	 */
	// const value = ref<string[]>([])
	// 新增弹窗是否打开
	const addDialogVisible = ref(false);
	// 弹窗标题
	const addTilte = ref('添加灰名单旅客');
	// 弹窗页面类型
	const dialogType = ref();
	// 时间戳，用于确保弹窗页面能加载不同的界面
	const timer = ref();

	// 打开新增窗口
	const typeId = ref('');
	const handleCreate = () => {
		timer.value = new Date().getTime();
		dialogType.value = greyListDialogOptions;
		if (typeId.value === '') {
			ElMessage.error('请选择灰名单种类');
			return;
		}
		addDialogVisible.value = true;
	};

	/*
	 * 功能-用于打开编辑窗口
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   typeId：存储灰名单id的数组
	 *   timer：// 时间戳，用于确保弹窗页面能加载不同的界面
	 *   dialogType：// 弹窗页面类型
	 *   editTilte：// 弹窗标题
	 *   faceInfoPicture：人脸信息
	 *   faceInfoPictures：图片数组
	 *   enclosureCode:  图片下载需要的code
	 * }
	 */
	// 弹窗标题
	const editTilte = ref('编辑灰名单旅客');
	// 编辑弹窗是否打开
	const editDialogVisible = ref(false);
	// 打开编辑窗口
	const editvalbefore = ref({});
	const faceInfoPicture = ref();
	const faceInfoName = ref<any>([]);
	const faceInfoPictures = ref<any>([]);
	const enclosureCode = ref<any>([]);
	const faceInfoPicturesArr = ref<any>([]);
	const faceInfoPicturesArrTemp = ref<any>([]);
	const handleEdit = (row) => {
		timer.value = new Date().getTime();
		dialogType.value = greyListDialogOptions;
		// 用于保存人脸图片的所有信息
		faceInfoPicturesArr.value.length = 0;
		if (row.files) {
			faceInfoPicturesArr.value =  row.files.slice(0);
			faceInfoPicturesArrTemp.value = row.files;
		}
		editDialogVisible.value = true;
		editvalbefore.value = row;
		faceInfoPicture.value = row.faceInfo;
		// 保存图片的名称
		faceInfoName.value.length = 0;
		if (row.files) {
			faceInfoName.value = row.files;
		}
		// 清空图片数组
		faceInfoPictures.value.length = 0;
		// 将人脸信息图片push到图片数组
		if (row.files) {
			for (let i = 0; i < row.files.length; i++) {
				const val =
					row.files[i].resourceAddress;
				faceInfoPictures.value.push(val);
			}
		}
		// 保存图片的下载code
		enclosureCode.value.length = 0;
		if (row.files) {
			for (let i = 0; i < row.files.length; i++) {
				enclosureCode.value.push(row.files[i]?.enclosureCode);
			}
		}

		
		nextTick(() => {
			FilterRef.value.setFieldsValue({
				name: row.name,
				age: row.age === 0 ? '' : row.age,
				sex: row.gender,
				idCard: row.idCard,
				id: row.id,
			});
		});
	};

	/*
	 * 功能-树控件必须的部分
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   defaultProps: 灰名单种类控件
	 *   grayData： 灰名单种类数组
	 *   rawFile：图片信息
	 * }
	 */
	const defaultProps = {
		children: 'children',
		label: 'label',
	};
	// 树节点被点击
	const handleNodeClick = (data, node) => {
		typeId.value = data.typeId;
		getData();
	};
	const grayData = ref<Tree[]>([]);
	const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
		if (rawFile.type.indexOf('image') === -1) {
			ElMessage.error('图片格式不正确');
			return false;
		} else if (rawFile.size / 1024 / 1024 > 10) {
			ElMessage.error('上传图片大小不能超过 10MB!');
			return false;
		}
		return true;
	};

	// 新增窗口点击取消
	const Cancel = () => {
		addDialogVisible.value = false;
		editDialogVisible.value = false;
		dialogType.value = '';
		faceInfoPicture.value = '';
		faceInfoPicturesArr.value = faceInfoPicturesArrTemp.value;
	};

		// 编辑窗口点击取消
		const editCancel = () => {
		addDialogVisible.value = false;
		editDialogVisible.value = false;
		// typeId.value = '';
		dialogType.value = '';
		faceInfoPicture.value = '';
		faceInfoPicturesArr.value = faceInfoPicturesArrTemp.value;
		getData()
	};

	/*
	 * 功能-新增窗口点击确认
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   addDialogVisible: 弹窗显示默认为false
	 *   addval: 调用新增数据接口需要的参数
	 *   rawFile：图片信息
	 * }
	 */
	// 新增窗口点击确认
	const picfile = ref([]);
	const Submit = async () => {
		const flag = await FilterRef.value?.validateRuleFormRef();
		if (flag === true) {
			
		let { idCard, sex: gender, age, name } = FilterRef.value.getParams();
		if (name.includes(' ')){
			name = name.replace(/\s/g, '')
		}
		if (idCard) {
			if (idCard.includes(' ')){
			idCard = idCard.replace(/\s/g, '')
		}
		}
		if (age) {
			if (age.includes(' ')){
			age = age.replace(/\s/g, '')
		}
			// 字符串类型转换为数字
			age = age*1
		}

			addDialogVisible.value = false;
			editDialogVisible.value = false;
			const addval = {};
			addval.idCard = idCard;
			addval.gender = gender;
			addval.age = age;
			addval.name = name.trim();
			addval.typeId = typeId.value;
			addval.creator = mender.value;
			// 存储图片信息
			picfile.value = FilterRef.value.getParams().faceInfo;
			const file = ref();
			// 如果选择了图片
			if (picfile.value && picfile.value.length>0) {
				getFiles()
					.then((res) => {
						file.value = res;
						addval.files = res;
						// 新增数据
						greyListAdd(addval)
							.then(() => {
								ElMessage.success('新增成功');
								picfile.value = [];
								getData();
							})
							.catch((err: any) => {
								ElMessage.error(err?.message || '新增失败');
							});
					})
					.catch((err: any) => {
						ElMessage.error(err?.message || '新增失败');
					});
			} else {
				greyListAdd(addval)
					.then((res) => {
						if (res.code === '1') {
							ElMessage.success(`新增成功`);
						} else {
							ElMessage.error(`${res.message}`);
						}
						getData();
					})
					.catch((err: any) => {
						ElMessage.error(err?.message || '新增失败');
					});
			}
		}
	};
	
	/*
	 * 功能-编辑窗口点击确认
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   editDialogVisible: 弹窗显示默认为false
	 *   addDialogVisible: 新增弹窗显示默认为false
	 *   params: 调用新编辑据接口需要的参数
	 * }
	 */
	// 编辑提交确认
	const SubmitEdit = async () => {
		let params = {};
		let { idCard, sex: gender, age, name } = FilterRef.value.getParams();
		if (name.includes(' ')){
			name = name.replace(/\s/g, '')
		}
		if (idCard) {
			if (idCard.includes(' ')){
			idCard = idCard.replace(/\s/g, '')
		}
		}
		if (age) {
			if (age.toString().includes(' ')){
				age = age.replace(/\s/g, '')
		}
			// 字符串类型转换为数字
			age = age*1
		}
		
		await nextTick(() => {
			FilterRef.value.setFieldsValue({
				name: name,
				age: age === 0 ? '' : age,
				sex: gender,
				idCard: idCard,
			});
		});
		// 触发验证
		const flag = await FilterRef.value?.validateRuleFormRef();
		if (flag === true) {
			addDialogVisible.value = false;
			editDialogVisible.value = false;
			const { idCard, sex: gender, age, name, id, faceInfo } = FilterRef.value.getParams();
			params = { idCard, gender, age, id, name, mender: mender.value, faceInfo };
			// 性别不输入
			params.gender = gender ? gender : '';
			// 身份证不输入
			if (idCard) {
				params.idCard = idCard;
			} else {
				params.idCard = '';
			}
			// 年龄不输入
			params.age = age ? age : '';
			// 去掉两端空格
			params.name = params.name.trim();
			// 如果选择了图片
			if (params.faceInfo && params.faceInfo.length>0) {
				// 存储图片信息
				picfile.value = FilterRef.value.getParams().faceInfo;
				getFiles()
					.then((res) => {
						params = { idCard, gender, age, id, name, mender: mender.value, files: res };
						// 编辑数据
						greyListEdit(params).then((res) => {
							ElMessage.success('编辑成功');
							picfile.value = [];
							getData();
						});
					})
					.catch((err: any) => {
						ElMessage.error(err?.message || '编辑失败');
					});
			}
			if (!params.faceInfo && faceInfoPicturesArr.value.length > 0) {
				params = {
					idCard,
					gender,
					age,
					id,
					name,
					mender: mender.value,
					files: faceInfoPicturesArr.value,
				};
				// 编辑数据
				greyListEdit(params)
					.then((res) => {
						ElMessage.success('编辑成功');
						picfile.value = [];
						getData();
					})
					.catch((err: any) => {
						ElMessage.error(err?.message || '编辑失败');
					});
			}
			if (!params.faceInfo && faceInfoPicturesArr.value.length == 0) {
				params.files = [{
      		enclosureCode: '',
      		enclosureContent: '',
      		enclosureName: '',
      		enclosureSuffix: '',
      		resourceAddress: ''
    		}]
				greyListEdit(params)
					.then(() => {
						ElMessage.success('编辑成功');
						getData();
					})
					.catch((err: any) => {
						ElMessage.error(err?.message || '编辑失败');
					});
			} if (!params.faceInfo) {
				greyListEdit(params)
					.then(() => {
						getData();
					})
					.catch((err: any) => {
						ElMessage.error(err?.message || '编辑失败');
					});
			}
		}
		getData()
	};

	// pagenation的pager参数
	const pager = computed(() => ({
		currentPage: current.value,
		pageSize: pageSize.value,
		total: total.value,
		// 7-24 手动设置了总页数
		pageCount: total.value === 0 ? 1 : Math.ceil(total.value / pageSize.value),
	}));

	/*
	 * 功能-查询数据
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   search: 查询条件
	 *   tableData: 要显示的数据
	 *   totalSize： 总条数
	 * }
	 */
	// 查询条件
	const search = ref({});
	// 表格数据
	const tableData = ref();
	// 总条数
	const totalSize = ref();
	// const loading = ref()
	// 获取数据
	const getData = async () => {
		checks.value = '';
		const params = {
			pageNum: current.value,
			pageSize: pageSize.value,
			condition: {},
		};
		
		// 查询条件
		// 姓名查询
		if (search.value.name) {
			params.condition.name = search.value.name || '';
		}
		// 身份证查询
		if (search.value.idCard) {
			params.condition.idCard = search.value.idCard || '';
		}
		// 时间查询
		if (search.value.date) {
			params.condition.createTimeStart = search.value.date[0] || '';
			params.condition.createTimeEnd = search.value.date[1] || '';
		}
		// 排序
		if (search.value.order) {
			params.condition.order = search.value.order || '';
		}
		// 树id
		if (typeId.value) {
			params.condition.typeId = typeId.value || '';
		}
		// 是否显示
		params.condition.isDisable = 'N';

		// 返回分页查询的结果
		const res = await greyPageList(params);
		
		
		// 对人脸信息字段做替换。
		res.data.list.forEach((item) => {
			if (item.files) {
				item.files.map((item2, index) => {
					return item2.resourceAddress = item.files[index].resourceAddress.replace('/general-business', basePath);
				})
			}
		});

		// 信息列表数据
		tableData.value = res.data.list;

		// 数据总长度
		totalSize.value = res.data.total;
		run(params);

		loading.value = false;
	};

	const getGrayType = async () => {
		// 灰名单种类数据转换
		// 返回灰名单种类
		const params = {};
		const res = await greyTypeList(params);
		grayData.value = res.data.map((item) => ({ typeId: item.typeId, label: item.typeName }));
	};

	/*
	 * 功能-分页查询
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   data: 查询条件
	 * }
	 */
	// 分页查询
	const searchChange = (data: FilterDataType) => {
		pager.value.currentPage = 1;
		search.value = data;
		
		getData();
	};

	/*
	 * 功能-图片下载
	 * Date: 2023-9-12
	 * Author: 范豪
	 * {
	 *   enclosureCode: 下载需要的参数
	 * }
	 */
	const downloadPic = async () => {
		downloadFiles(enclosureCode.value[0])
			.then((res) => {
				const link = document.createElement('a');
				const blob = new Blob([res], { type: 'image/jpeg' }); // 修改 MIME 类型为 'image/jpeg'
				link.style.display = 'none';
				link.href = URL.createObjectURL(blob);
				link.setAttribute(
					'download',
					`人脸信息.jpg` // 文件名后缀修改为 '.jpg'，对应图片类型
				);
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				ElMessage.success('下载成功');
			})
			.catch((err: any) => {
				ElMessage.error(err?.message || '下载失败');
			});
	};

	/*
	 * 功能-批量删除
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   idList: 要删除的id数组
	 * }
	 */
	const beforehandleDelete = () => {
		if (checks.value === '' || checks.value.length === 0) {
			ElMessage.error('请勾选需要删除的数据行');
			return;
		}
	};
	const handleDelete = async () => {
		if (checks.value === '' || checks.value.length === 0) {
			ElMessage.error('请勾选需要删除的数据行');
			return;
		}
		const idList: greyListsdelType = Array.from(checks.value);
		const params = ref({});
		params.value.mender = mender.value;
		params.value.idList = idList;
		if (params.value.idList.length === 0) {
			ElMessage.error('请勾选需要删除的数据行');
			return;
		}
		await greylistDels(params.value);
		ElMessage.success('删除成功');
		getData();
	};

	/*
	 * 功能-获取文件
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   picfile: 本地文件
	 *   files：返回文件信息
	 * }
	 */
	const getFiles = async () => {
		const files: Array<FileDataType> = [];
		if (picfile.value) {
			const len = picfile.value.length;
			for (let i = 0; i < len; i++) {
				const ele: any = picfile.value[i];
				const fileName = ele.name;
				const index = fileName.lastIndexOf('.');
				const name = fileName.slice(0, index);
				const formData = new FormData();
				formData.append('file', ele.raw);
				formData.append('fileName', name);
				let res = null;
      	res = await uploadFiles(formData)
				if (res.code === '1') {
					if (res?.data) {
						files.push({
							enclosureContent: res.data.enclosureContent, // 文件名 TCDM.md
							enclosureName: res.data.enclosureName, // 文件前缀 TCDM
							enclosureSuffix: res.data.enclosureSuffix, // 文件后缀md
							resourceAddress: res.data.resourceAddress, // 文件相对地址，网关地址+resourceAddres即可完成下载
							enclosureCode: res.data.enclosureCode, // 唯一标识
						});
					}
				} else {
					ElMessage.error(`${res.message}`);
				}
			}
		}
		return files;
	};

	/*
	 * 功能-删除单条数据
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   delval: 删除需要的参数
	 * }
	 */
	const delval = ref({});
	const deleteItem = (row) => {
		if (row.id) {
			delval.value.id = row.id || '';
		}
		if (row.creator) {
			delval.value.mender = row.creator || '';
		}
		delval.value.mender = mender.value;
		// 调用删除接口
		greyListDel(delval.value)
			.then(() => {
				ElMessage.success('删除成功');
				getData();
			})
			.catch((err: any) => {
				ElMessage.error(err?.message || '删除失败');
			});
	};

	/*
	 * 功能-删除人脸图片
	 * Date: 2023-9-14
	 * Author: 范豪
	 * {
	 *   value: 排序所需的参数
	 * }
	 */
	const removeFacePic = (data) => {
		ElMessage.success('删除图片成功');
		faceInfoPicturesArr.value.splice(0, 1);
		faceInfoPictures.value.splice(0, 1);
	};

	/*
	 * 功能-点击排序
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   value: 排序所需的参数
	 * }
	 */
	const sortChange = (value) => {
		const sort = value.order?.slice(0, -6) || 'asc';
		let order = [];
		if (value.prop === 'idCard') {
			order = [{ column: 'id_card', method: sort }];
		} else if (value.prop === 'age') {
			order = [{ column: 'age', method: sort }];
		} else if (value.prop === 'createTime') {
			order = [{ column: 'create_time', method: sort }];
		}
		search.value.order = order;
		getData();
	};

	/*
	 * 功能-点击翻页
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   size: 页数
	 * }
	 */
	const changeCurrent = (size: number) => {
		current.value = size;
		getData();
	};

	/*
	 * 功能设置每页条数
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   value: 每页条数
	 * }
	 */
	const changePageSize = (value: number) => {
		pageSize.value = value;
		getData();
	};

	/*
	 * 功能-清空查询条件
	 * Date: 2023-8-9
	 * Author: 范豪
	 * {
	 *   data: 查询条件
	 * }
	 */
	const searchReset = () => {
		pager.value.currentPage = 1;
		pager.value.pageSize = 10;
		typeId.value = '';
		getData();
	};

	/*
	 * 功能-自定义弹窗校验
	 * Date: 2023-8-23
	 * Author: 范豪
	 */
	// 校验年龄
	const validatorage = (rule: any, value: any, callback: any) => {
		// rule:即为校验对象
		// value:即为值
		// 校验通过，callback放行
		// 校验失败，callback，注入错误提示信息
		if (value) {
			if (value.toString().includes(' ')){
			value = value.replace(/\s/g, '')
		  }
			if (value > 0 && value < 150 && value%1===0) {
				callback();
			} else {
				callback(new Error('年龄为1-150的正整数'));
			}
		} else {
			callback();
		}
	};

	// 校验姓名
	const validatorname = (rule: any, value: any, callback: any) => {
		if (value) {
			if (value.includes(' ')){
			value = value.replace(/\s/g, '')
		  }
			if (value.length > 1 && value.length < 16) {
				callback();
			} else {
				callback(new Error('姓名为长度2-15'));
			}
		} else {
			callback(new Error('姓名必填'));
		}
	};
	// 校验身份证
	const validatoridCard = (rule: any, value: any, callback: any) => {
		if (value) {
			if (value.includes(' ')){
			value = value.replace(/\s/g, '')
		  }
			if (value && UtilRoles.checkIdCard(value)) {
				callback();
			} else {
				callback(new Error('请填写合法的身份证号'));
			}
		} else {
			callback();
		}
	};
	// 校验人脸信息
	// const validatorfaceInfo = (rule: any, value: any, callback: any) => {
	// 	if (value) {
	// 		if (value.length < 11) {
	// 			for (let i = 0; i < value.length; i++) {
	// 			if (value[i].raw.type == 'image/png' || value[i].raw.type == 'image/jpeg' || value[i].raw.type == 'image/gif') {
	// 				if (value[i].size / 1024 / 1024 > 10) {
	// 				callback(new Error('图片大小不能超过10m'));
	// 			  } else {
	// 				callback()
	// 			  }
	// 			} else {
	// 				callback(new Error('仅支持上传图片'));
	// 			}
	// 		}
	// 		} else {
	// 			callback(new Error('上传文件数量限制10个'));
	// 		}
	// 	} else {
	// 		callback();
	// 	}
	// };
	// 校验人脸信息
	const validatorfaceInfo = (rule: any, value: any, callback: any) => {
		if (fileFlag == 1) {
			callback(new Error('仅支持上传图片'))
		}
		if (fileFlag == 2) {
			callback(new Error('图片大小不超过10m'))
		}
		if ( value && value.length > 10) {
			callback(new Error('图片最多10张'))
		} else {
			callback()
		}
	};
	// 弹窗验证
	const rules = {
		name: [
			{
				required: true,
				validator: validatorname,
				trigger: 'change',
			},
		],
		age: [
			{
				validator: validatorage,
				trigger: 'change',
			},
		],
		idCard: [
			{
				validator: validatoridCard,
				trigger: 'change',
			},
		],
		faceInfo: [
			{
				validator: validatorfaceInfo,
				trigger: 'change',
			},
		],
	};

	onBeforeMount(() => {
		getData(), getGrayType();
	});
</script>
<style>
	.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
		background-color: #5daaf0;
	}
</style>
<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		.container-fluid {
			height: calc(100% - var(--horizontal-menu-height));
			display: flex;
			justify-content: flex-start;
			flex-flow: row nowrap;
			.main-view {
				flex: 1;
				overflow-y: auto;
				background: #f0f1f5;
			}
		}
	}
	.imagebutton {
		display: flex;
		flex-direction: column;
	}

	.el-input {
		margin-bottom: 10px;
		/*border-bottom: #2F7DF1 1px solid;*/
		border-radius: 4px;
	}
	.container {
		display: flex;
		align-items: stretch;
		justify-content: center;
		background: #f5f7f9;
		min-height: 100%;
		overflow: hidden;
		.companyTree {
			padding: 24px;
			margin: 12px 0 24px 12px;
			background: #fff;
			border-radius: 8px;
			.title {
				font-size: 16px;
				font-family: 'HarmonyOS_Sans_SC_Medium';
				border-left: #2f7df1 2px solid;
				text-indent: 1em;
				color: #353a42;
				line-height: 16px;
				margin: 10px 0;
			}
			/deep/ .el-tree-node__content {
				height: 32px;
			}
			/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
				background-color: #adadad; //背景色
			}
			.custom-tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				padding-right: 8px;
				.oper {
					display: flex;
					justify-content: center;
					align-items: center;
					user-select: none;
					img {
						width: 20px;
						height: 20px;
						object-fit: contain;
						&:hover {
							transform: scale(1.1);
						}
					}
					img + img {
						margin-left: 8px;
					}
					.border {
						border-radius: 4px;
						border: 1px solid #2f7df1;
						padding: 2px;
						box-sizing: border-box;
						margin-left: 8px;
					}
				}
			}
		}
	}
	:deep(.upload-demo) {
		margin-bottom: 15px !important;
		height: 110px !important;
		width: 100% !important;
		overflow-y: scroll !important;
	}
</style>
@/api/pax/grey/listgrey
